<template>
  <swiper 
    class="banner-swiper" 
    indicator-dots 
    autoplay 
    circular
    indicator-active-color="$primary-color"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <image 
        class="banner-image" 
        :src="item.image" 
        mode="aspectFill"
        @click="handleClick(item)"
      />
    </swiper-item>
  </swiper>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

const handleClick = (item) => {
  if (item.link) {
    uni.navigateTo({ url: item.link })
  }
}
</script>

<style lang="scss">
@import "@/uni.scss";
.banner-swiper {
  width: 100%;
  height: 350rpx;
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
}
</style>